<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/10
  Time: 23:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情页</title>
    <meta name="description" content="芝麻优购ZM.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!">
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购">
    <!-- 引入网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 初始化css文件 -->
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/details.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/getParameter.js"></script>
    <script>
        $(function () {
            $("#search-right").click(function () {
                if($("#search-left").val()){
                    location.href="/list.jsp?query="+$("#search-left").val();
                }else{
                    alert("请输入内容");
                   // location.href="/list.jsp"
                }
            })
            var goods_id = getParameter("goods_id");
            console.log(goods_id);
            $.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/detail",{goods_id:goods_id},function (data) {
                var item = data.message;
                if(!item.goods_small_logo||item.goods_small_logo==null){
                    item.goods_small_logo="images/no.png"
                }
                $("#shopimg").html('<img  src="'+data.message.goods_small_logo+'">');
                var lis = "";
                var imgs = "";
                for (var i=0;i<item.pics.length;i++){
                    lis += '<li><img src="'+item.pics[i].pics_sma+'" alt=""></li>'
                    imgs += '<img src="'+item.pics[i].pics_big+'" alt="">'
                }
                $("#smalllist").html(lis);
                $("#sname").html(item.goods_name);
                $("#sprice").html("￥"+item.goods_price);
                $("#sder").html(item.goods_introduce);
                $("#moreimg").html(imgs)
            })

        })
    </script>
</head>
<body>
<header class="shortcut">
    <div class="w">
        <div class="shortcut-left fl">
            <ul>
                <li>芝麻优购欢迎你!&nbsp;&nbsp;</li>
                <li><a href="/login.jsp">请登录..</a>
                    <a href="/regist.jsp" class="red">免费注册</a></li>
            </ul>
        </div>
        <div class="shortcut-right fr">
            <ul>
                <li><a href="/index.jsp">我的订单</a></li><li class="space"></li>
                <li><a href="/index.jsp">治安优购</a><i></i></li><li class="space"></li>
                <li><a href="/index.jsp">优购会员</a></li><li class="space"></li>
                <li><a href="/index.jsp">企业采购</a></li><li class="space"></li>
                <li><a href="/index.jsp">芝麻优购</a><i></i></li><li class="space"></li>
                <li><a href="/index.jsp">客户服务</a><i></i></li><li class="space"></li>
                <li><a href="/exit">退出</a><i></i></li>
            </ul>
        </div>
    </div>
</header>
<div class="searchitem w">
    <div class="searchitem-logo"><h1><a href="/index.jsp" title="芝麻优购">芝麻优购</a></h1></div>
    <div class="searchitem-search">
        <input type="text" name="" id="search-left" placeholder="请搜索内容...">
        <button id="search-right">搜索</button>
    </div>
    <div class="searchitem-search-hotwords">
        <ul>
            <li><a href="" class="red">优惠购首发</a></li>
            <li><a href="">亿元优惠</a></li>
            <li><a href="">9.9元团购</a></li>
            <li><a href="">每满99减30</a></li>
            <li><a href="">办公用品</a></li>
            <li><a href="">电脑</a></li>
            <li><a href="">通信</a></li>
        </ul>
    </div>
    <div class="searchitem-car">
        <a href="/car.jsp"><i class="searchitem-car-left"></i>
        <span class="searchitem-car-content">我的购物车</span>
        <i class="searchitem-car-right"></i>
            <i class="carcount">3</i></a>
    </div>
</div>
<nav>
    <div class="navitems w">
        <div class="navitems-left">
            <div class="dt">全部商品分类</div>
        </div>
        <div class="nav-items-content">
            <ul>
                <li><a href="">服装城</a></li>
                <li><a href="">美妆馆</a></li>
                <li><a href="">品优超市</a></li>
                <li><a href="">全球购</a></li>
                <li><a href="">闪购</a></li>
                <li><a href="">团购</a></li>
                <li><a href="">拍卖</a></li>
                <li><a href="">有趣</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- 头部结束 -->
<div class="de-content w">
    <!-- 面包屑导航 -->
    <div class="crumb_wrap">
        <a href="">手机、数码、通讯</a>
        〉     <a href="">手机</a>
        〉     <a href="">Apple苹果</a>
        〉     <a href="">iphone 6S Plus系类</a>
    </div>
    <!-- 产品介绍模块 -->
    <div class="product_intro clearfix">
        <!-- 预览区域 -->
        <div class="preview_wrap fl">
            <div class="preview_img" id="shopimg" ><img  src="upload/s1.png"></div>
            <div class="preview_list">
                <div class="arrow_prev"></div>
                <div class="arrow_next"></div>
                <ul class="list_item" id="smalllist">
                    <li><img src="upload/s1_1.png" alt=""></li>
                    <li><img src="upload/s1_2.png" alt=""></li>
                    <li><img src="upload/s1_3.png" alt=""></li>
                    <li><img src="upload/s1_4.png" alt=""></li>
                    <li><img src="upload/s1_5.png" alt=""></li>
                </ul>
            </div>
            <div class="share">
                商品编号：0468256666
                <p><a href="">分享</a></p>
                <span>关注5000</span>
                <i>对比</i>
            </div>
        </div>
        <!-- 产品详细信息 -->
        <div class="itemInfo_wrap fr">
            <div class="sku_name" id="sname">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div>
            <div class="news">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</div>
            <div class="summary">
                <dl class="summary_price">
                    <dt>价    格</dt>
                    <dd><i class="price" id="sprice">￥5299.00</i><a href="#"> 降价通知</a> <div class="remark">累计评价<span class="skyblue">612188</span>条</div></dd>
                </dl>
                <dl class="summary_promotion">
                    <dt>促销</dt>
                    <dd><em>加价购</em>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品  详情 》</dd>
                </dl>
                <dl class="summary_support">
                    <dt>支持</dt>
                    <dd>以旧换新，闲置手机回收  4G套餐超值抢  礼品购</dd>
                </dl>
                <dl class="choose_color">
                    <dt>颜色</dt>
                    <dd>
                        <a href="javascript:;">玫瑰金</a>
                        <a href="javascript:;" class="current">金色</a>
                        <a href="javascript:;">白色</a>
                        <a href="javascript:;">土豪色</a>
                    </dd>
                </dl>
                <dl class="choose_version">
                    <dt>选择版本</dt>
                    <dd>
                        <a href="javascript:void(0);" class="current">公开版</a>
                        <a href="javascript:void(0);">移动4G</a>
                    </dd>
                </dl>
                <dl class="choose_memory">
                    <dt>选择容量</dt>
                    <dd>
                        <a href="javascript:void(0);" >16GB</a>
                        <a href="javascript:void(0);" class="current">64GB</a>
                        <a href="javascript:void(0);">128GB</a>
                    </dd>
                </dl>
                <dl class="choose_type">
                    <dt>购买方式</dt>
                    <dd>
                        <a href="javascript:void(0);" class="current">官方标配</a>
                        <a href="javascript:void(0);">移动优惠购</a>
                        <a href="javascript:void(0);">电信优惠购</a>
                    </dd>
                </dl>
                <dl class="choose_type">
                    <dt>套装</dt>
                    <dd>
                        <a href="javascript:void(0);">保护套装</a>
                        <a href="javascript:void(0);">充电套装</a>
                    </dd>
                </dl>
                <div class="choose_btns">
                    <div class="choose_amount">
                        <input type="text" value="1">
                        <a href="javascript:;" class="add">+</a>
                        <a href="javascript:;" class="reduce" >-</a>
                    </div>
                    <a href="#" class="addCar">立即购买</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 产品细节模块 -->
    <div class="product_detail clearfix">
        <div class="aside fl">
            <div class="tab_list fl">
                <ul>
                    <li class="first_tab">相关分类</li>
                    <li class="second_tab">推荐品牌</li>
                </ul>
            </div>
            <div class="tab_con">
                <ul >
                    <li >
                        <img src="upload/aside_img.jpg" alt="">
                        <h5>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h5>
                        <div class="aside_price">￥19</div>
                        <a href="" class="as_addcar">加入购物车</a>
                    </li>
                    <li >
                        <img src="upload/aside_img.jpg" alt="">
                        <h5>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h5>
                        <div class="aside_price">￥19</div>
                        <a href="" class="as_addcar">加入购物车</a>
                    </li>
                    <li >
                        <img src="upload/aside_img.jpg" alt="">
                        <h5>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h5>
                        <div class="aside_price">￥19</div>
                        <a href="" class="as_addcar">加入购物车</a>
                    </li>
                    <li >
                        <img src="upload/aside_img.jpg" alt="">
                        <h5>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h5>
                        <div class="aside_price">￥19</div>
                        <a href="" class="as_addcar">加入购物车</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="detail fr">
            <div class="detail_tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(999+)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="detail_tab_con">
                <div class="item">
                    <ul class="item_info" id="sder">
                        <li>分辨率：1920*1080(FHD)</li>
                        <li>后置摄像头：1200万像素</li>
                        <li>前置摄像头：500万像素</li>
                        <li>核      数：其他</li>
                        <li>频      率：以官网信息为准</li>
                        <li>品牌： Apple ♥关注</li>
                        <li>商品名称：APPLEiPhone 6s Plus</li>
                        <li>商品编号：1861098</li>
                        <li>商品毛重：0.51kg</li>
                        <li>商品产地：中国大陆</li>
                        <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                        <li>系统：苹果（IOS）</li>
                        <li>像素：1000-1600万</li>
                        <li>机身内存：64GB</li>
                    </ul>
                    <p><a href="" class="more fr">查看更多参数&#xea52</a></p>
                    <div id="moreimg">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
